<template>
	<view class="datamodule">
		<view class="content_date">
			<view class="date_location"></view>
			<!-- <view class="date_location" @tap="cityObj.show = true">
				<image src="../../static/img/ic_location.png"></image>
				<text>{{curCity.name}}</text>
			</view> -->
			<view class="date_sw">
				<view :class="dateIndex==0?'target':''" @click="dateSw(0);">昨日</view>
				<view :class="dateIndex==1?'target':''" @click="dateSw(1);">近7日</view>
				<view :class="dateIndex==2?'target':''" @click="dateSw(2);">近30日</view>
			</view>
			<view class="date_select">
				<picker mode="selector" :range="picker.pickerArr" @change="pickerSel($event)">
					<text>{{picker.pickerTarget}}</text>
					<image src="../../static/img/ic_pulldown.png"></image>
				</picker>
			</view>
		</view>
		<!-- 外卖模块 -->
		<view class="contentModule contentWm">
			<view class="module_list">
				<view class="module_listinc">
					<view class="module_listtop">
						<text>外卖交易金额</text>
					</view>
					<view class="gvm_listcon">
						<view class="gvm_total">
							<view class="gvm_totalNum">{{res.payment.total_payment}}</view>
							<view class="">
								<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									<image v-if="res.payment.flag==-1" src="../../static/img/ic_down.png"></image>
									<image v-else-if="res.payment.flag==1" src="../../static/img/icon_up.png"></image>
									<text v-else class="greyfont mgleft10">暂无变化</text>
									
									<text v-if="res.payment.flag==-1 || res.payment.flag==1">{{res.payment.d2d}}</text>
								</view>
							</view>
						</view>
						<view class="gvm_listtype">
							<view>
								<view class="gvm_listtype_title">自取</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.self_payment}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">自配送</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.shop_payment}}
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">平台配送</view>
								<view class="displayinLine" :class="colorData[res.payment.flag]">
									{{res.payment.platform_payment}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="module_listinc">
					<view class="module_listtop">
						<text>外卖交易笔数</text>
					</view>
					<view class="gvm_listcon">
						<view class="gvm_total">
							<view class="gvm_totalNum">{{res.num.total_num}}</view>
							<view class="">
								<text class="greyfont">与前{{flagNum[dateIndex]}}日相比</text>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									<image v-if="res.num.flag==-1" src="../../static/img/ic_down.png"></image>
									<image v-else-if="res.num.flag==1" src="../../static/img/icon_up.png"></image>
									<text v-else class="greyfont mgleft10">暂无变化</text>
									
									<text v-if="res.num.flag==-1 || res.num.flag==1">{{res.num.d2d}}</text>
								</view>
							</view>
						</view>
						<view class="gvm_listtype">
							<view>
								<view class="gvm_listtype_title">自取</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.self_num}}笔
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">自配送</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.shop_num}}笔
								</view>
							</view>
							<view>
								<view class="gvm_listtype_title">平台配送</view>
								<view class="displayinLine" :class="colorData[res.num.flag]">
									{{res.num.platform_num}}笔
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选择经营类目 -->
		<view>
			<w-picker
				:visible.sync="cityObj.show"
				mode="linkage"
				:options="cityData"
				:level="2"
				default-type="id"
				:default-props="cityObj.cityProp"
				@confirm="cityFun($event,'linkage')"
				@cancel="cityObj.show = false"
				ref="linkage" 
			></w-picker>
		</view>
	</view>
</template>

<script>
	export default {
		name: "datamodule4",
		data() {
			return {
				curCity:{}, //当前选中的城市
				dateIndex:0,//日期索引
				picker:{ //选择器数据
					pickerArr:['全部数据','我的数据'],
					pickerTarget:'全部数据',
					checkType:1
				},
				colorData:{
					'-1':'greenfont',
					'0':'greyfont',
					'1':'redfont',
				},
				cityObj:{
					show:false,
					cityProp:{label:'name',value:'id',children:'child'},
					cityTargetName:''
				},
				timeStatus:{
					'0':'2',
					'1':'3',
					'2':'4'
				},
				flagNum:{ //与前几日对比的显示文字
					'0':'1',
					'1':'7',
					'2':'30'
				}
			};
		},
		props:{
			res:{
				"payment": {
					"total_payment": 0,
					"self_payment": 0,
					"shop_payment": 0,
					"platform_payment": 0,
					"flag": 0,
					"d2d": 0
				},
				"num": {
					"total_num": 0,
					"self_num": 0,
					"shop_num": 0,
					"platform_num": 0,
					"flag": 0,
					"d2d": 0
				}
			},
			cityData:{//selector,region数据源
				type:Array,
				default(){
					return []
				}
			}
		},
		mounted:function(){
			
		},
		methods:{
			pickerSel:function(e){
				this.picker.pickerTarget = this.picker.pickerArr[e.detail.value];
				this.picker.checkType = e.detail.value+1;
				this.refreshDataEmit();
			},
			dateSw:function(index){
				this.dateIndex = index;
				this.refreshDataEmit();
			},
			//选择城市
			cityFun:function(data){;
				for(let key in data.obj){
					if(key == 'col2'){
						this.curCity = data.obj[key];
					}
				}
				this.refreshDataEmit();
			},
			//刷新当前页面的数据
			refreshDataEmit:function(){
				this.$emit('refreshData',{
					type:'Wm',
					data:{
						data_type:3,
						check_type:this.picker.checkType, //全部/我的数据
						seachtime:this.timeStatus[this.dateIndex]  //时间
					}
				})
			}
		},
		components: {
		}
	}
</script>

<style lang="scss" scoped>
	@import './datamodule.scss';
</style>
